<template>
  <div class="login-container">
    <div class="login-container-form">
      <div
        class="login-container-title text-center text-2xl text-white mb-2 tracking-wider"
      >
        智能邮箱助手
      </div>
      <a-form :model="form" @submit="handleSubmit" @submit.prevent>
        <a-form-item>
          <a-input v-model="form.username" placeholder="请输入用户名/手机号">
            <template v-slot:prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
          >
            <template v-slot:prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <div class="flex">
            <a-input
              v-model="form.identifyCode"
              placeholder="请输入验证码"
            ></a-input>
            <a-button
              class="ml-2"
              style="font-size: 12px; width: 100px; height: 30px"
              size="small"
              type="primary"
              :disabled="form.username === ''"
            >
              获取验证码
            </a-button>
          </div>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            :disabled="
              form.username === '' ||
              form.password === '' ||
              form.password === ''
            "
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
  import { dependencies, devDependencies } from '*/package.json'
  import { mapActions, mapGetters } from 'vuex'
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'

  export default {
    name: 'Login',
    components: {
      UserOutlined,
      LockOutlined,
    },
    data() {
      return {
        form: {
          username: '',
          password: '',
          identifyCode: '',
        },
        redirect: undefined,
        dependencies: dependencies,
        devDependencies: devDependencies,
      }
    },
    computed: {
      ...mapGetters({
        logo: 'settings/logo',
        title: 'settings/title',
      }),
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    methods: {
      ...mapActions({
        login: 'user/login',
      }),
      handleRoute() {
        return this.redirect === '/404' || this.redirect === '/403'
          ? '/'
          : this.redirect
      },
      async handleSubmit() {
        await this.login(this.form)
        await this.$router.push(this.handleRoute())
      },
    },
  }
</script>
<style lang="less">
  .login-container {
    width: 100%;
    height: 100vh;
    background: url('~@/assets/login_images/login_background.png');
    display: flex;
    justify-content: center;
    align-items: center;
    &-form {
      width: 380px;
      height: 380px;
      padding: 4vh;
      background: url('~@/assets/login_images/login_form.png');
      background-size: 100% 100%;
      border-radius: 10px;
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }

    .ant-col {
      width: 100%;
      padding: 0 10px 0 10px;
    }
    .ant-input {
      height: 35px;
    }
    .ant-btn {
      width: 100%;
      height: 45px;
      border-radius: 99px;
    }
  }
</style>
